<template>
	<div v-for="(index,item) in itemData">
		<div v-show="itemType">
			<!-- <a :style="{background:'url('+item.picPath+') no-repeat 0 0',backgroundSize:'100% 100%'}"  v-bind:class="['card-type-b card-item',{'card-lock':itemType,'card-color':item.imageType}]"> -->
				<!-- 新改版
				<div class="shade"><i class="card-state">{{item.cardStatusName}}</i></div>
				<h3 class="card-title">{{item.cardTemplateName}}</h3>
				<p class="card-price"><span class="price-sign">&yen;</span><span class="price-val">298</span></p>
				<p class="card-text">{{{item.mdseSellingPoint | toenter}}}</p>
				<div class="item-buy">
					<span class="card-explain">仅限{{item.provName}}门店使用</span>
					<div class="buy-btn"><i class="sf-card-btn"></i><span class="btn-text">用卡下单</span></div>
				</div>
				新改版 -->
			<a :style="{background:'url('+item.picPath+') no-repeat 0 0',backgroundSize:'100% 100%',filter: 'grayscale(1)'}"  v-bind:class="['card-type-b card-item',{'card-lock':itemType,'card-color':item.imageType}]">
			<!-- <a  v-bind:class="['card-type-b card-item card-color',{'card-lock':itemType}]"> -->
				<div class="card-head">
					<h3 class="head-title clearfix"><span class="main-title">{{item.cardTemplateName}}</span><span class="number">No.{{item.cardNo}}</span></h3>
					<span class="card-validity">有效期:{{item.stratDeadline}} ~ {{item.deadline}}</span>
				</div>
				<i class="card-state">{{item.cardStatusName}}</i>
				<!-- <div class="card-authority">仅限{{item.provName}}门店使用</div> -->
			</a>
		</div>
		<div v-else>
			<!-- <a ca="P我的卡列表_我的卡${{item.cardTemplateName}}" :style="{background:'url('+item.picPath+') no-repeat 0 0',backgroundSize:'100% 100%'}" v-link="{name:'mycarddetails',params:{cardCode:item.cardNo}}" v-bind:class="['card-type-b card-item',{'card-lock':itemType,'card-color':item.imageType}]"> -->
			<a ca="P我的卡列表_我的卡${{item.cardTemplateName}}" :style="{background:'url('+item.picPath+') no-repeat 0 0',backgroundSize:'100% 100%'}" v-link="{name:'mycarddetails',params:{cardCode:item.cardNo}}" v-bind:class="['card-type-b card-item card-color',{'card-lock':itemType}]">
				<!-- 新改版
				<h3 class="card-title">{{item.cardTemplateName}}</h3>
				<p class="card-price"><span class="price-sign">&yen;</span><span class="price-val">298</span></p>
				<p class="card-text">{{{item.mdseSellingPoint | toenter}}}</p>
				<div class="item-buy">
					<span class="card-explain">仅限{{item.provName}}门店使用</span>
					<div class="buy-btn"><i class="sf-card-btn"></i><span class="btn-text">用卡下单</span></div>
				</div>
				新改版 -->
				<div class="card-head">
					<h3 class="head-title"><span class="main-title">{{item.cardTemplateName}}</span><span class="number">No.{{item.cardNo}}</span></h3>
					<span class="card-validity">有效期:{{item.stratDeadline}} ~ {{item.deadline}}</span>
				</div>
				<div class="card-authority">仅限{{item.provName}}门店使用</div>
				<div class="btn-text">去下单</div>
			</a>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
		data () {
			return {
				itemData:'',
				itemType:false
			}
		},
		events: {
			cardTypeBdata: function ( msg ) {
				var stratDateFormate, endDateFormate, stratDate, endDate;
				this.itemType = false;
				if(this.$route.params.type == 'lockCard'){ //去不可用卡
					this.itemType = true;
					this.itemData = msg;
				}else{

					this.itemData = msg;
				}
				//时间日期格式化
				for(var i = 0; i < this.itemData.length; i++){
					this.itemData[i].cardState = (this.itemData[i].isCanUse == 1)? true:false;

					if(this.itemData[i].picPath == null){

						this.itemData[i].imageType = true;

					}else{

						this.itemData[i].imageType = false;

					}
					stratDate = new Date(this.itemData[i].startDate);
					endDate = new Date(this.itemData[i].endDate);

					stratDateFormate = stratDate.getFullYear() + '.' + (stratDate.getMonth()+1 < 10 ? '0'+(stratDate.getMonth()+1) : stratDate.getMonth()+1) + '.' + stratDate.getDate();

					endDateFormate = endDate.getFullYear() + '.' + (endDate.getMonth()+1 < 10 ? '0'+(endDate.getMonth()+1) : endDate.getMonth()+1) + '.' + endDate.getDate();
					this.itemData[i].deadline = endDateFormate;
					this.itemData[i].stratDeadline = stratDateFormate;
				}

				this.$nextTick(function(){
					(new Analytics).scan();
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
@import '../../assets/css/_functions.scss';
@import '../../assets/css/_variables.scss';
		/* //新样式
		.shade{
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			background:#000;
			opacity:0.6;
			z-index:10;
		}
		.card-title{
			font-size:rem(18);
			width: rem(180);
			height: rem(21);
			margin-bottom:rem(15);
			line-height:rem(21);
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text-align: left;
			color:#98A1BC;
		}
		.card-price{
			text-align:left;
			font-size:rem(48);
			color:#424173;
			.price-sign{
				margin-top:rem(7);
				margin-right:rem(5);
				font-size:rem(27);
				display:inline-block;
				vertical-align: top;
			}
			.price-val{
				display:inline-block;
			}
		}
		.card-text{
			width:rem(280);
			height:rem(87);
			line-height:rem(22);
			text-align:left;
			font-size:rem(14);
			overflow:hidden;
			margin-top:rem(10);
		}
		.card-explain{
			float:left;
			width:rem(120);
			font-size:rem(11);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin-top: rem(1);
			text-align:left;
			margin-top:rem(15);
		}
		.buy-btn{
			float: right;
			width:rem(147);
			height:rem(44);
			line-height: rem(44);
			font-size:rem(18);
			border-top-left-radius:25px;
			border-bottom-left-radius:25px;
			background-color:#ffe800;
			color:#ff4605;
			margin-top: rem(1);
			box-shadow:-1px 4px 0px 1px rgba(248,151,13,0.60);
		}
		.btn-icon{
			width:rem(32);
			height:rem(32);
			line-height:rem(32);
			text-align:center;
			display:inline-block;
			border-radius:30px;
			background:#ff4605;
			color:#ffe800;
			vertical-align: middle;
			margin:rem(-3) rem(15) 0 rem(5);
		}
		.sf-card-btn{
			display: inline-block;
			vertical-align: middle;
			margin-left: 0.5rem;
			margin-top: -2px;
			margin-right: 1rem;
		}
		.btn-text{
			vertical-align: middle;
		}
		.item-buy{
			position: relative;
		}
		//新样式end
		.card-type-b{
			height:rem(250);
			border-radius: 10px;
			padding:rem(25) rem(0) 0 rem(25);
			position:relative;
			overflow: hidden;
			margin:0 auto rem(15) auto;
			color:#fff;
			display:block;
			background-size: 100% 100%;
			box-shadow:0px rem(5) rem(12) 0px rgba(141,141,141,0.49);
			.card-head{
				.number{
					width:rem(145);
					overflow: hidden;
					white-space: nowrap;
		    				text-overflow: ellipsis;
					font-size:rem(12);
					float:right;
					padding-top:rem(5);
					display:block;
					text-align:right;
				}
			}
			.main-title{
				width:rem(160);
				height: rem(20);
				line-height: rem(20);
				overflow: hidden;
				display:block;
				float: left;
				white-space: nowrap;
		    			text-overflow: ellipsis;
			}
			.head-title{
				font-size:rem(18);
				overflow:hidden;
			}
			.card-validity{
				margin-top:rem(7);
				float:left;
			}
			.card-authority{
				font-size: rem(12);
				position:absolute;
				bottom:rem(10);
			}
			.card-state{
				width:rem(50);
				height:rem(50);
				line-height: rem(50);
				border-radius:45px;
				border:2px dashed #999;
				text-align: center;
				font-size:rem(12);
				font-weight:normal;
				transform:rotate(35deg);
				position:absolute;
				bottom:rem(15);
				right:rem(15);
				display:block;
			}
		}
		.card-lock{
			background-color:#fff;
			text-shadow:none;
			color:#999;
			.card-state{
				display:block;
				color:#fff;
			}
		}
		.card-color{
			background-color:#22b2ed !important;
			color:#fff;
			.card-state{
				border: 2px dashed #fff;
			}
		} */
		.card-type-b{
			height:rem(180);
			border-radius: 15px;
			padding:rem(15) rem(15) 0 rem(15);
			position:relative;
			overflow: hidden;
			margin:0 auto rem(15) auto;
			color:#fff;
			display:block;
			background-size: 100% 100%;
			text-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.50);
			.card-head{
				.number{
					width:rem(145);
					overflow: hidden;
					white-space: nowrap;
    				text-overflow: ellipsis;
					font-size:rem(12);
					float:right;
					padding-top:rem(5);
					display:block;
					text-align:right;
				}
			}
			.main-title{
				width:rem(160);
				height: rem(20);
				line-height: rem(20);
				overflow: hidden;
				display:block;
				float: left;
				white-space: nowrap;
    			text-overflow: ellipsis;
			}
			.head-title{
				font-size:rem(18);
				overflow:hidden;
			}
			.card-validity{
				margin-top:rem(7);
				float:left;
			}
			.card-authority, .btn-text{
				font-size: rem(12);
				position:absolute;
				bottom:rem(10);
			}
			.btn-text{
				right:rem(10);
			}
			.card-state{
				width:rem(50);
				height:rem(50);
				line-height: rem(50);
				border-radius:45px;
				border:2px dashed #999;
				text-align: center;
				font-size:rem(16);
				font-weight:bold;
				transform:rotate(35deg);
				position:absolute;
				bottom:rem(15);
				right:rem(15);
				display:block;
			}
		}
		.card-lock{
			background-color:#fff;
			text-shadow:none;
			color:#999;
			.card-state{
				display:block;
				color:#fff;
			}
		}
		.card-color{
			background-color:#22b2ed !important;
			color:#fff;
			.card-state{
				border: 2px dashed #fff;
			}
		}
</style>